<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        .main{
            background-color: #fff;
            width: 300px;
            height: 200px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <input class="nickname" type="text" placeholder="昵称"> <br> <br>
    <textarea class="comment" placeholder="请输入评论"></textarea> <br>
    <button class="message">留言</button>

    <ul class="list">
        <!-- <li>
            <h4>2022-4-21 12:12:12</h4>
            <h3>昵称</h3>
            <p>留言的内容</p>
            <div class="reply">
                <p>回复的内容1</p>
            </div>
            <button>回复</button>
            <button>删除</button>
        </li> -->
    </ul>

    <div class="cover">
        <div class="main">
            <p>请输入回复</p>
            <textarea class="answer" placeholder="请输入评论"></textarea> <br>
            <button class="confirm">确认</button>
            <button class="cancel">取消</button>
        </div>
    </div>

    <script>

        var oName = get('.nickname') ;
        var oComment = get('.comment') ;
        var oMsg = get('.message') ;
        var oUl = get('.list') ;

        // 实现留言

        oMsg.onclick = function() {
            // 获取昵称和内容
            var name = oName.value ;
            var com = oComment.value ;
            // 判断  
            if(name && com) {
                // 实现倒计时  --- 封装函数  djs()

                var oLi = document.createElement('li') ;   // 创建标签

                var date = new Date() ;   // 格式化时间
                oLi.innerHTML = `
                    <h4>${date}</h4>
                    <h3>${name}</h3>
                    <p>${com}</p>
                    <div class="reply">
                        
                    </div>
                    <button>回复</button>
                    <button>删除</button>
                `
                // li放入ul
                oUl.appendChild(oLi) ;

            } else {
                alert('输入不能为空')
            }

        }




        function get(s) {
            return document.querySelector(s) ;
        }

    </script>
</body>
</html>